<template>
  <!-- 内容主要部分 -->
  <div id="buildingBody">
    <div id="buildingTopBody">
      <topLeft />
      <topRight />
    </div>
    <div id="buildingBottomBody">
      <bottomLeft />
      <bottomCenter />
      <bottomRight />
    </div>
  </div>
</template>

<script>
import topLeft from "./left";
import topRight from "./topRight";
import bottomLeft from "./bottomLeft";
import bottomCenter from "./bottomCenter";
import bottomRight from "./bottomRight";
export default {
  data() {
    return {};
  },
  components: {
    topLeft,
    topRight,
    bottomLeft,
    bottomCenter,
    bottomRight
  },
  mounted() {},
  methods: {}
};
</script>

<style lang="scss" scoped>
#buildingBody {
  display: grid;
  // grid-template-columns: 33.33% 66.66%;
  grid-template-rows: 66.66% 33.33%;
  width: 100%;
  height: 94%;
  padding: 14px;
  margin-bottom: 1px;
  #buildingTopBody {
    display: grid;
    grid-template-columns: 50% 50%;
    width: 100%;
    height: 100%;
    // margin-top: 5px;
  }
  #buildingBottomBody {
    display: grid;
    grid-template-columns: 33.33% 33.33%33.33%;
    width: 100%;
    height: 100%;
    margin-top: 5px;
  }
}
</style>
